<template>
  <n-card
      class="task-background"
      embedded
      hoverable
      @click="showDetail"
  >
    <template #header>
      <n-ellipsis style="max-width: 240px">
        {{ task.title }}
      </n-ellipsis>
    </template>
    <n-tag :type="getTagType(task.status.code)">
      {{ task.status.name }}
    </n-tag>
  </n-card>
  <n-modal v-model:show="showModel">
    <n-card v-if="isObjEmpty(taskDetail)"
            style="width: 400px;"
            title="出错啦">
      <n-empty description="看看别的吧">
      </n-empty>
    </n-card>
    <n-card v-else
            :bordered="false"
            aria-modal="true"
            role="dialog"
            size="huge"
            style="width: 800px; height: 600px"
    >
      <template #header>
        {{ taskDetail.title }}
      </template>
      <template #header-extra>
        <n-tag :type="getTagType(taskDetail.status.code)">
          {{ taskDetail.status.name }}
        </n-tag>
      </template>
      <template #default>
        <p>{{ taskDetail.content }}</p>
      </template>
      <template #footer>
        <n-descriptions :column="2" label-placement="left">
          <n-descriptions-item v-if="taskDetail.createdTime" label="创建时间">
            {{ taskDetail.createdTime }}
          </n-descriptions-item>
          <n-descriptions-item v-if="taskDetail.status.code === 4" label="完成时间">
            {{ taskDetail.endTime }}
          </n-descriptions-item>
          <n-descriptions-item v-else-if="taskDetail.status.code === 3" label="开始时间">
            {{ taskDetail.startTime }}
          </n-descriptions-item>
          <n-descriptions-item v-else-if="taskDetail.status.code === 2" label="删除时间">
            {{ taskDetail.abandonTime }}
          </n-descriptions-item>
        </n-descriptions>
      </template>
    </n-card>
  </n-modal>
</template>

<script setup>
import {inject, onMounted, reactive, ref} from "vue";
import {isObjEmpty} from "../../utils/object.js";
import {getTaskDetail} from "../../api/taskApi.js";


const props = defineProps({
  task: Object
})

const showModel = ref(false)
const taskDetail = ref({})
const getTagType = inject('getStatusTagType')

function showDetail() {
  getTaskDetail(props.task.id).then(resp => {
    taskDetail.value = resp.data
  }).catch(err => {
    console.log(err)
  }).finally(() => {
    showModel.value = true
  })
}

</script>

<style scoped>
.task-background {
  background-color: #f9f9f9
}
</style>